{% load django_tables2 %}

<div class="table-responsive">
  <table{% if table.attrs %} {{ table.attrs.as_html }}{% endif %}>
    {% if table.show_header %}
      <thead>
        <tr>
          {% for column in table.columns %}
            {% if column.orderable %}
              <th {{ column.attrs.th.as_html }}>
                {% if column.is_ordered %}
                  <div class="float-end">
                    <a href="#"
                       hx-get="{% querystring table.prefixed_order_by_field='' %}"
                       hx-target="#object_list"
                       hx-push-url="true"
                       class="text-danger"
                    ><i class="mdi mdi-close"></i></a>
                  </div>
                {% endif %}
                <a href="#"
                   hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
                   hx-target="#object_list"
                   hx-push-url="true"
                >{{ column.header }}</a>
              </th>
            {% else %}
              <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
            {% endif %}
          {% endfor %}
        </tr>
      </thead>
    {% endif %}
    <tbody>
      {% for row in table.page.object_list|default:table.rows %}
        <tr {{ row.attrs.as_html }}>
          {% for column, cell in row.items %}
            <td {{ column.attrs.td.as_html }}>{{ cell }}</td>
          {% endfor %}
        </tr>
      {% empty %}
        {% if table.empty_text %}
          <tr>
            <td colspan="{{ table.columns|length }}" class="text-center text-muted">&mdash; {{ table.empty_text }} &mdash;</td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
    {% if table.has_footer %}
      <tfoot>
        <tr>
          {% for column in table.columns %}
            <td>{{ column.footer }}</td>
          {% endfor %}
        </tr>
      </tfoot>
    {% endif %}
  </table>
</div>
